<template>
  <BaseCard
    :class="cardClass"
    :clickable="clickable"
    @click="handleClick"
  >
    <!-- 用户头像和信息 -->
    <view class="user-header">
      <BaseAvatar
        :src="user.avatar"
        :text="user.nickname"
        :size="avatarSize"
        :status="user.isOnline ? 'online' : 'offline'"
        class="user-avatar"
      />

      <view class="user-info">
        <text class="user-name">{{ user.nickname }}</text>
        <text class="user-signature">{{ user.signature }}</text>

        <!-- 用户标签 -->
        <view v-if="user.tags && user.tags.length > 0" class="user-tags">
          <text
            v-for="tag in user.tags.slice(0, 3)"
            :key="tag"
            class="tag-item"
          >
            {{ tag }}
          </text>
        </view>
      </view>

      <!-- 关注按钮 -->
      <slot name="action">
        <BaseButton
          v-if="showFollowButton && !isCurrentUser"
          :type="user.isFollowing ? 'secondary' : 'primary'"
          size="small"
          @click.stop="handleFollow"
        >
          {{ user.isFollowing ? '已关注' : '关注' }}
        </BaseButton>
      </slot>
    </view>

    <!-- 统计信息 -->
    <view v-if="showStats" class="user-stats">
      <view class="stat-item">
        <text class="stat-number">{{ formatCount(user.followingCount) }}</text>
        <text class="stat-label">关注</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ formatCount(user.followersCount) }}</text>
        <text class="stat-label">粉丝</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ formatCount(user.novelCount) }}</text>
        <text class="stat-label">小说</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ formatCount(user.likeCount) }}</text>
        <text class="stat-label">获赞</text>
      </view>
    </view>

    <!-- 扩展内容 -->
    <slot></slot>

    <!-- 右上角菜单 -->
    <view v-if="showMenu" class="user-menu" @click.stop>
      <BaseIcon
        name="i-carbon-overflow-menu-horizontal"
        size="small"
        clickable
        @click="handleMenuClick"
      />
    </view>
  </BaseCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BaseCard from '../ui/BaseCard.vue'
import BaseAvatar from '../ui/BaseAvatar.vue'
import BaseButton from '../ui/BaseButton.vue'
import BaseIcon from '../ui/BaseIcon.vue'

interface User {
  id: string
  nickname: string
  signature?: string
  avatar?: string
  tags?: string[]
  isOnline?: boolean
  isFollowing?: boolean
  followingCount?: number
  followersCount?: number
  novelCount?: number
  likeCount?: number
}

interface Props {
  // 用户数据
  user: User
  // 是否可点击
  clickable?: boolean
  // 是否为当前用户
  isCurrentUser?: boolean
  // 头像尺寸
  avatarSize?: number | 'small' | 'medium' | 'large'
  // 是否显示关注按钮
  showFollowButton?: boolean
  // 是否显示统计信息
  showStats?: boolean
  // 是否显示菜单
  showMenu?: boolean
  // 布局类型
  layout?: 'horizontal' | 'vertical'
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  clickable: true,
  isCurrentUser: false,
  avatarSize: 'medium',
  showFollowButton: true,
  showStats: true,
  showMenu: false,
  layout: 'horizontal',
  customClass: '',
})

const emit = defineEmits<{
  click: [user: User]
  follow: [user: User]
  menu: [user: User, event: Event]
}>()

// 卡片样式
const cardClass = computed(() => {
  const baseClass = 'user-card'

  const layoutClass = props.layout === 'vertical'
    ? 'user-card-vertical'
    : 'user-card-horizontal'

  return [
    baseClass,
    layoutClass,
    props.customClass,
  ].filter(Boolean).join(' ')
})

// 格式化数量
const formatCount = (count?: number) => {
  if (!count) return '0'
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}

// 处理卡片点击
const handleClick = () => {
  if (props.clickable) {
    emit('click', props.user)
  }
}

// 处理关注
const handleFollow = () => {
  emit('follow', props.user)
}

// 处理菜单点击
const handleMenuClick = (event: Event) => {
  emit('menu', props.user, event)
}
</script>

<style scoped>
.user-card {
  @apply relative;
}

.user-card-horizontal {
  @apply flex flex-col gap-md;
}

.user-card-vertical {
  @apply flex flex-col gap-md;
}

.user-header {
  @apply flex items-start gap-md;
}

.user-avatar {
  @apply flex-shrink-0;
}

.user-info {
  @apply flex-1 min-w-0;
}

.user-name {
  @apply text-base font-semibold text-text-primary mb-1;
}

.user-signature {
  @apply text-sm text-text-secondary mb-2;
  @apply line-clamp-2;
}

.user-tags {
  @apply flex gap-1 flex-wrap;
}

.tag-item {
  @apply px-2 py-1 bg-novel-primary/20 text-novel-primary text-xs rounded-custom;
}

.user-stats {
  @apply flex items-center justify-around py-sm border-t border-custom;
}

.stat-item {
  @apply flex flex-col items-center;
}

.stat-number {
  @apply text-base font-semibold text-text-primary;
}

.stat-label {
  @apply text-xs text-text-muted mt-1;
}

.user-menu {
  @apply absolute top-2 right-2;
}

/* 文本截断工具类 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>